<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>新增巴士</title>
		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/jquery.cookie.js"></script>
		<script src="../../js/layer/layer.js"></script>
		<style type="text/css">
			ul li {
				list-style: none;
				display: block;
			}

			#l-map {
				height: 300px;
				width: 100%;
				z-index: 0;
			}
		</style>
	</head>
	<body>
		<div id="l-map"></div>
		<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
		<div>
			<ul>
				<li>巴士名称:<input type="text" id="name" name="name" /></li>
				<li>巴士起点:<input type="text" id="startPoint" name="startPoint" /><input type="hidden" id="startLng" name = "startLng" /><input type="hidden" id="startLat" name = "startLat" /></li>
				<li>巴士终点:<input type="text" id="endPoint" name="endPoint" /><input type="hidden" id="endLng" name = "endLng" /><input type="hidden" id="endLat" name = "endLat" /></li>
				<li>价格:<input type="text" id="price" name="price" /></li>
				<li>开行时间:<input type="text" id="time" name="time" /></li>
				<li>距离:<input type="text" id="distance" name="distance" /></li>
				<li><input type="button" value="提交" id="btn" /></li>
			</ul>
		</div>
		
	</body>
	<script>
		var myValue;
		var suggestId;
		var map;
		$(function() {
			$("#startPoint").one("focusin", function() {
				suggestId =$(this).attr("id");
				bindSearch();
			});

			$("#endPoint").one("focusin", function() {
				suggestId =$(this).attr("id");
				bindSearch();
			});

			loadScript();

			$("#btn").click(function() {
				submit();
			});
		});



		function mapInit() {
			map = new BMapGL.Map("l-map");
			map.centerAndZoom("天安门", 12); // 初始化地图,设置城市和地图级别。
			map.enableScrollWheelZoom();
			console.log(suggestId);
			
		}
		
		function bindSearch(){
			var ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
				{
					"input": suggestId,
					"location": map
				});
			ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
				var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if (e.fromitem.index > -1) {
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
			
				value = "";
				if (e.toitem.index > -1) {
					_value = e.toitem.value;
			
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
				document.getElementById("searchResultPanel").innerHTML = str;
			});
			
			
			ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				console.log(_value);
				document.getElementById("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " +
					myValue;
			
				setPlace(map);
			});
		}
		

		function setPlace(map) {
			map.clearOverlays();    //清除地图上所有覆盖物
			function myFun() {
				var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
				console.log(pp.lng + ":" + pp.lat);
				$("#"+suggestId).next("input").val(pp.lng);
				$("#"+suggestId).next("input").next("input").val(pp.lat);
				
				map.centerAndZoom(pp, 18);
				map.addOverlay(new BMapGL.Marker(pp)); //添加标注
			}
			var local = new BMapGL.LocalSearch(map, { //智能搜索
				onSearchComplete: myFun
			});
			local.search(myValue);
		}

		function loadScript() {
			var script = document.createElement("script");
			script.src =
				"https://api.map.baidu.com/api?v=2.0&type=webgl&ak=do2yPKBE3TG2NWilpYYns6QPaYReUT2C&callback=mapInit&s=1";
			document.body.appendChild(script);
		}

		function submit() {

			var clazz = {
				name: $("#name").val(),
				startPoint: $("#startPoint").val(),
				startLng: $("#startLng").val(),
				startLat: $("#startLat").val(),
				endPoint: $("#endPoint").val(),
				endLng: $("#endLng").val(),
				endLat: $("#endLat").val(),
				price: $("#price").val(),
				time: $("#time").val(),
                distance:$("#distance").val()
			}
			$.ajax({
				type: "post",
				dataType: "json",
				contentType: "application/json",
				url: baseUrl + "bus/new.json",
				data: JSON.stringify(clazz),
				success: function(data) {
					if (data.code == "200") {
						window.location.href = "list.html";
					} else {
						layer.msg("修改失败!", {
							icon: 5
						});
					}
				}
			});
		}
	</script>
</html>
